<template>
  <el-button @click="goPage">下一页</el-button>{{ pdfState.numPages }}
  <div id="vue-pdf-view">
    <div id="page-view" v-show="showPdf">
      <vue-pdf-embed @loaded="loaded" @rendering-failed="renderingFailed" @rendered="rendered" :source="pdfState.pdfSource" :page="pdfState.pageNum" textLayer ref='vuePdf' />
    </div>
  </div>
</template>
<script setup>
import { createLoadingTask } from 'vue3-pdfjs/esm'
import { onMounted, reactive, ref } from 'vue'
import VuePdfEmbed from 'vue-pdf-embed'
// 导入自己的文件
import pdfUrl from '@/assets/pdf/前端通关手册JavaScript.pdf'
// import { nextTick } from 'vue'
const showPdf = ref(true)

const vuePdf = ref(null)
const pdfState = reactive({
  pdfSource: {
    url: pdfUrl
    // cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.9.359/cmaps/',
    // cMapPacked: true,
  },
  // 当前页
  pageNum: 1,
  // 总页数
  numPages: 2
})
onMounted(async () => {
    // const doc = await VuePdfEmbed.getDocument(pdfState.pdfSource.url).promise
    // // 获取文件总页数
    // console.log(doc.numPages);
    const loadingTask = createLoadingTask(pdfState.pdfSource.url)
  loadingTask.promise.then((pdf) => {
    pdfState.numPages = pdf.numPages
  })
});

function goPage() {
  pdfState.pageNum++
}

function rendered(){
    console.log('rendered');
    
}
function renderingFailed(){
    console.log('rendering-failed');
    
}
function loaded(){
    console.log('loaded');
    
}

</script>
<style>
#vue-pdf-view {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scale(1);
  width: 70%;
  height: 100%;
  text-align: center;

  /* 内容溢出显示滚动条 */
  overflow: scroll;
  /* 隐藏x、y轴滚动条 */
  overflow-y: hidden;
  overflow-x: hidden;
}

/* 设置滚动栏的宽、高 */
#vue-pdf-view::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* 设置滚动条的样式 */
#vue-pdf-view::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: #eee;
}

/* 鼠标经过滚动条变换颜色 */
#vue-pdf-view::-webkit-scrollbar-thumb:hover {
  background-color: #cbcbff;
}
</style>
